Оцените, пожалуйста, верстку

[Catherine]

Доброго времени суток, уважаемые жители форума!

Для совершенствования навыков в стремлении к развитию и познанию выкладываю очередную верстку на обсуждение.

Страница номер раз, два, три, четыре.

Буду рада любым замечаниям. Особо хотелось бы услышать мнения по html-разметке, грамотности использования тегов и селекторов, указания на грубые и стандартные для новичков в верстке ошибки. Возможно, какие-то ошибки повторяются из проекта в проект, упоминания о них для меня все также крайне важно и актуально. Жесткая (вплоть до беспощадной) конструктивная критика приветствуется

Спасибо за внимание к этой теме!

P.S. Предыдущие темы: первая, вторая.

Edited July 6, 2012 by Catherine

[sammasati]

Так а что тут критиковать? По-моему, все хорошо.

Пару мелочей только заметил: js-скрипты в html-файле и использование тега <p> не там, где нужно. Для любых однострочных надписей подходит <span>, а <p> нужен для параграфов текста.

[psywalker]

Катюшка, ну смотри:

1. Горизонтальный скролл появляется раньше, чем нужно. Нужно, чтобы боковые тени уходили за экран.

2. <p class="tel"> - имхо, здесь нужен div, а не абзац.

3. <div class="body-img">

<img width="1920" alt="" src="assets/images/img-bg.jpg">

</div>

А почему на body не повесили фон? Есть же ещё html и т.д.?

4. <div class="clear"></div> - Ужас, прикажите её казнить!

5. <div class="header-bottom"> - вот в этом блоке всё Хаотично разбросано, нет нужных контейнеров, я бы сделал две колонки.

6. <div class="bag"> - внутри сделано всё на абзацах, что считаю не верным.

7. <form id="search_form" class="search" action="post">

<div>

Внутри какие-то непонятные div безимянные(( Я бы сделал fieldset + дал бы им классы.

8. <div class="header-line"></div> - Казнить)

9. <div class="container">

Зачем на нём висят и float: left; и overflow: hidden;? Ведь оба создают свой контекст?

10. <p class="price">8900р.</p> - здесь сноава можно было <span> взять.

11. <h2>Инструмент для дома</h2> - тоже классы нужны.

12. <h2>Инструмент для дома</h2>

<a href="javascript:void(0);" class="catalog-detail">открыть подробный каталог</a>

И вообще, вот эти две вещи нужно было в отдельный блок запихнуть, вверху.

13. <a href="javascript:void(0);">Электродрель AC Electric RS-39</a>

Не понятно, что это ссылки. А потом я бы их тоже в блок засунул.

14. <i></i>

<a href="javascript:void(0);">Электроинструмент</a>

Почему последнее не заголовок? И нафиг там пустой <i></i>?

15. <a href="javascript:void(0);">Болгарки</a>

Области слишком много для клика(. Неудобно.

16. В подвале классов для микроформатов, а там просятся.

------

По мелочи ещё и стили особо не смотрел, но в целом вёрстка ни о чём, обычная я бы сказал, фрилансер-среднячок. Есть траблы с лишними и наоборот, не достяющими контейнерами, болезнь <p></p>. Ну фриланса покатит вполне (с его низким уровнем), а если что-то большее, нуу, если фартанёт).

Больше читай, практикуйся, следи за работами "отцов", выкладывай работы и пиши, если что)

[Catherine]

Спасибо за критику!

Буду думать. psywalker, по пунктам возникают вопросы, можно ли их задать в этой теме?

[psywalker]

Спасибо за критику!

Буду думать. psywalker, по пунктам возникают вопросы, можно ли их задать в этой теме?

Один вопрос = один поцелуй

[Aleksey19881988]

Я конечно сам зелёный но верстка мне нравится

[decode]

4. <div class="clear"></div> - Ужас, прикажите её казнить!

psywalker, если не трудно, могли бы Вы подсказать, как это нужно делать?)) не создавая пустых блоков присваивать "clear" следующему блоку?

Catherine, надеюсь не против, что я в чужой теме спросил =)

————--

Вот тут есть статейка, и в ней всякие развилочки

Спасибо =)

Edited July 7, 2012 by decode

[psywalker]

4. <div class="clear"></div> - Ужас, прикажите её казнить!

psywalker, если не трудно, могли бы Вы подсказать, как это нужно делать?)) не создавая пустых блоков присваивать "clear" следующему блоку?

Есть разные способы для этого и они давно уже прижились и прекрасно себя чувсвтвуют. Вот тут есть статейка, и в ней всякие развилочки (ссылки на другие ресурсы). Вот прочитай их всех внимательно.

[Catherine]

2. <p class="tel"> - имхо, здесь нужен div, а не абзац.

4. <div class="clear"></div> - Ужас, прикажите её казнить!

5. <div class="header-bottom"> - вот в этом блоке всё Хаотично разбросано, нет нужных контейнеров, я бы сделал две колонки.

6. <div class="bag"> - внутри сделано всё на абзацах, что считаю не верным.

7. <form id="search_form" class="search" action="post">

<div>

Внутри какие-то непонятные div безимянные(( Я бы сделал fieldset + дал бы им классы.

9. <div class="container">

Зачем на нём висят и float: left; и overflow: hidden;? Ведь оба создают свой контекст?

10. <p class="price">8900р.</p> - здесь снова можно было <span> взять.

16. В подвале классов для микроформатов, а там просятся.

——

По мелочи ещё и стили особо не смотрел, но в целом вёрстка ни о чём, обычная я бы сказал, фрилансер-среднячок. Есть траблы с лишними и наоборот, не достяющими контейнерами, болезнь <p></p>. Ну фриланса покатит вполне (с его низким уровнем), а если что-то большее, нуу, если фартанёт).

Больше читай, практикуйся, следи за работами "отцов", выкладывай работы и пиши, если что)

По этим пунктам полностью согласна. Еще раз спасибо за столь развернутый ответ. В остальном есть тема для обсуждения

[Catherine]

8. <div class="header-line"></div> - Казнить)

11. <h2>Инструмент для дома</h2> - тоже классы нужны.

12. <h2>Инструмент для дома</h2>

<a href="javascript:void(0);" class="catalog-detail">открыть подробный каталог</a>

И вообще, вот эти две вещи нужно было в отдельный блок запихнуть, вверху.

13. <a href="javascript:void(0);">Электродрель AC Electric RS-39</a>

Не понятно, что это ссылки. А потом я бы их тоже в блок засунул.

14. <i></i>

<a href="javascript:void(0);">Электроинструмент</a>

Почему последнее не заголовок? И нафиг там пустой <i></i>?

15. <a href="javascript:void(0);">Болгарки</a>

Области слишком много для клика(. Неудобно.

8. А чем плох <div class="header-line"></div> в конкретно данном случае? Можно поподробнее? Этот разделитель находится только на главной странице. Или имеется в виду, что надо было использовать тег <hr>?

11. Почему?

12. Почему надо было в отдельный блок запихнуть? Это связано с логической разметкой, или не только?

13. Речь идет о первой странице и блоке с классом catalog-item?

14. Пустой <i></i> это элемент, при нажатии на который происходит раскрытие и сворачивание подменю. А как лучше было сделать в данном случае?

15. Да, я знаю, полностью поддерживаю, но именно так и было задумано дизайнером, так что моей вины в том нет.

[psywalker]

8. А чем плох <div class="header-line"></div> в конкретно данном случае? Можно поподробнее? Этот разделитель находится только на главной странице. Или имеется в виду, что надо было использовать тег <hr>?

Не в конретном случае, а вообще это плохо, даже очень. В жизни такого не делал, всегда находил способы. А здесь я бы повесил фон на header-bottom или на худой конец сделал бы обёртку и повесил бы фон на неё. Но бросать бесхозный элемент на странице - это хреново.

11. Почему?

Если смотрять ща на ситуцию, то класс нужен на всяк пожарный, потому что <h2> ща один на целый блок, и хз, вдруг будут и другие. Или делай отдельно шапку для блока, тогда не нужен.

12. Почему надо было в отдельный блок запихнуть? Это связано с логической разметкой, или не только?

Потому что это по факту шапка. Я вот так вижу) Возможно в ней будет меню и т.д.

13. Речь идет о первой странице и блоке с классом catalog-item?

Да.

14. Пустой <i></i> это элемент, при нажатии на который происходит раскрытие и сворачивание подменю. А как лучше было сделать в данном случае?

А на саму ссылку чё не повесить клик?

15. Да, я знаю, полностью поддерживаю, но именно так и было задумано дизайнером, так что моей вины в том нет.

Тогда не стоило это писать)

[Catherine]

14. Пустой <i></i> это элемент, при нажатии на который происходит раскрытие и сворачивание подменю. А как лучше было сделать в данном случае?

А на саму ссылку чё не повесить клик?

А если по ТЗ надо повесить клик не на ссылку, а на некий элемент сбоку от ссылки? Использовать вместо <i></i> еще одну ссылку? Или картинку? Или не принципиально?

[psywalker]

14. Пустой <i></i> это элемент, при нажатии на который происходит раскрытие и сворачивание подменю. А как лучше было сделать в данном случае?

А на саму ссылку чё не повесить клик?

А если по ТЗ надо повесить клик не на ссылку, а на некий элемент сбоку от ссылки? Использовать вместо <i></i> еще одну ссылку? Или картинку? Или не принципиально?

Тогда оставь

[Viper]

Тогда оставь

Ну почему же... Тег <i> там не к месту(не логично). Семантичнее будет сделать ссылкой, ИМХО.

8. А чем плох <div class="header-line"></div> в конкретно данном случае? Можно поподробнее? Этот разделитель находится только на главной странице. Или имеется в виду, что надо было использовать тег <hr>?

Не в конретном случае, а вообще это плохо, даже очень. В жизни такого не делал, всегда находил способы. А здесь я бы повесил фон на header-bottom или на худой конец сделал бы обёртку и повесил бы фон на неё. Но бросать бесхозный элемент на странице - это хреново.

Почему? Зачем для добавления картины(декоративного элемента) на "дом" лучше выстраивать "невидимую стену"(wrap), на которую крепить эту самую картину{(в ситуации, когда его(фон, например) не получается положить на структурный элемент)}? Этот wrap тогда нужно "впаивать" в структуру и удаление которого может повлечь изменение стилей других элементов(может и не в этом случае, я обобщаю). А так декоративный элемент можно спокойно ставить и убирать без боязни повлиять(во всяком случае, кардинально) на другие элементы. Плюс: большая вложенность замедляет(немного ) построение ДОМ дерева и скорость обработки(js-сом) элементов, которые "глубоко закопаны", заметно ниже. Придерживаюсь мнения, что декоративный элемент не должен влиять на структуру ДОМ дерева без необходимости, ИМХО. Может я и не прав(есть плюсы и минусы) и к каждому случаю нужно подходить с умом, но - "хреново", как по мне перебор...) ИМХО

П.С. Эх... когда же такие элементы можно будет спокойно делать с помощью :after/:before или Multiple Backgrounds без добавления хаков для IE)

Edited July 24, 2012 by Viper

[Catherine]

Тег <i> там не к месту(не логично). Семантичнее будет сделать ссылкой, ИМХО.

Зачем для добавления картины(декоративного элемента) на "дом" лучше выстраивать "невидимую стену"(wrap), на которую крепить эту самую картину{(в ситуации, когда его(фон, например) не получается положить на структурный элемент)}? Этот wrap тогда нужно "впаивать" в структуру и удаление которого может повлечь изменение стилей других элементов(может и не в этом случае, я обобщаю). А так декоративный элемент можно спокойно ставить и убирать без боязни повлиять(во всяком случае, кардинально) на другие элементы. Плюс: большая вложенность замедляет(немного ) построение ДОМ дерева и скорость обработки(js-сом) элементов, которые "глубоко закопаны", заметно ниже. Придерживаюсь мнения, что декоративный элемент не должен влиять на структуру ДОМ дерева без необходимости, ИМХО. Может я и не прав(есть плюсы и минусы) и к каждому случаю нужно подходить с умом, но - "хреново", как по мне перебор...) ИМХО

Спасибо за ответ! Действительно, этот элемент на остальных страницах не повторяется, а вешать его на что-то я посчитала нецелесообразным, но всегда хочется сделать лучше, так что есть над чем думать. За нелогичность использования <i></i> отдельное спасибо, учту

[psywalker]

Viper,

Ну почему же... Тег <i> там не к месту(не логично). Семантичнее будет сделать ссылкой, ИМХО.

Согласен, я имел ввиду, что Оставить, а уже что именно, решать хозяину.

Почему? Зачем для добавления картины(декоративного элемента) на "дом" лучше выстраивать "невидимую стену"(wrap), на которую крепить эту самую картину{(в ситуации, когда его(фон, например) не получается положить на структурный элемент)}?

Этот wrap тогда нужно "впаивать" в структуру и удаление которого может повлечь изменение стилей других элементов(может и не в этом случае, я обобщаю). А так декоративный элемент можно спокойно ставить и убирать без боязни повлиять(во всяком случае, кардинально) на другие элементы.

Потому что неясно, к чему относится этот бесхозный элемент. Во внешней разметке (например, если это не блоки со статьями и т.д. Нужно приводить пример?) бросать непонятные элементы Хреново! Завтра блок переместиться и твой элемент уже будет вообще не понятен никому.

Плюс: большая вложенность замедляет(немного ) построение ДОМ дерева и скорость обработки(js-сом) элементов, которые "глубоко закопаны", заметно ниже. Придерживаюсь мнения, что декоративный элемент не должен влиять на структуру ДОМ дерева без необходимости, ИМХО.

Это ты Яндексу скажи). Если делать всё с умом, то в итоге ты больше приобретёшь.

Может я и не прав(есть плюсы и минусы) и к каждому случаю нужно подходить с умом, но - "хреново", как по мне перебор...) ИМХО

А по мне как раз в тему)

[Viper]

Потому что неясно, к чему относится этот бесхозный элемент. Во внешней разметке (например, если это не блоки со статьями и т.д. Нужно приводить пример?) бросать непонятные элементы Хреново! Завтра блок переместиться и твой элемент уже будет вообще не понятен никому.

Смотря как реализовывать эту идею... опять же, не кто не говорит про бездумное и повсеместное её использование. Декоративный элемент должен находиться в том блоке, который он "украшает" и, соответственно, при переносе он будет переноситься с ним, и не кто не отменял комментарии. Непонятно бывает тем, кто не сталкивался с таким, ИМХО. К этому просто не привыкли, но это не означает, что это не удобно для всех и во всех случаях. На практике, кто вник в идею, некоторым начинает нравиться: изменения становятся проще и быстрее, особенно, помогает если в концепции дизайна много разных страниц, имеющих различия в основных секциях или нужна поддержка, например, скругленных углов, теней для IE с помощью conditional comments. Я не агитирую всегда так делать - я говорю, что такая методика(идея) бывает полезной в определенных случаях, что делает её не лучше, а - альтернативой в ситуациях, когда это имеет смысл/пользу.

Это ты Яндексу скажи). Если делать всё с умом, то в итоге ты больше приобретёшь.

К скорости/производительности? Не понимаю как... К удобству? "Ну проект проекту рознь"

И если делать все с умом, то любая(адекватная) идея, в том или ином случае, может быть лучше стандартной) ИМХО. Все начинается с анализа...

А по мне как раз в тему)

Я понимаю и уважаю твою точку зрения и не ожидал, если честно, поддержки) Но и не удержался не высказать свой взгляд на логику построения структуры, которая мне более по душе и идеология которой несет(ИМХО) больше(в зависимости от условий) преимуществ при правильном использовании. И оценить её я смог только со временем...

Edited July 24, 2012 by Viper

[psywalker]

Viper, Я вот смотрю сейчас на эту полоску и понимаю, что она не является разделителем вообще, а относится именно к Хедеру, тогда вопрос, почему я должен бросать что-то во вне, если это относится к чему-то? Ну давай тогда и другие части хедера тоже поделим и выбросим наружу)

[sigma77]

8. А чем плох <div class="header-line"></div> в конкретно данном случае? Можно поподробнее? Этот разделитель находится только на главной странице. Или имеется в виду, что надо было использовать тег <hr>?

Не в конретном случае, а вообще это плохо, даже очень. В жизни такого не делал, всегда находил способы. А здесь я бы повесил фон на header-bottom или на худой конец сделал бы обёртку и повесил бы фон на неё. Но бросать бесхозный элемент на странице - это хреново.

Макс, да ладно?

Не так давно ты меня убеждал совсем в обратно. В данном случае, я тоже считаю, что целесообразней делать полоску отдельным блоком с абсолютом, но вот помещать её в хедер.

[psywalker]

8. А чем плох <div class="header-line"></div> в конкретно данном случае? Можно поподробнее? Этот разделитель находится только на главной странице. Или имеется в виду, что надо было использовать тег <hr>?

Не в конретном случае, а вообще это плохо, даже очень. В жизни такого не делал, всегда находил способы. А здесь я бы повесил фон на header-bottom или на худой конец сделал бы обёртку и повесил бы фон на неё. Но бросать бесхозный элемент на странице - это хреново.

Макс, да ладно? Не так давно ты меня убеждал совсем в обратно.

Ну-ка?

[sigma77]

Ну-ка?

Ты предлагаешь просмотреть все твои 13 с лишним тысяч постов?

Ну если найду, кину сцыль.

Ха. нашла - http://forum.htmlbook.ru/index.php?showtopic=26485

Edited July 24, 2012 by sigma77

[psywalker]

Ну-ка?

Ты предлагаешь просмотреть все твои 13 с лишним тысяч постов?

Ну если найду, кину сцыль.

Я просто подозреваю, что тут два варианта. Либо это было очень давно, либо ситуация была иная)

Ха. нашла - http://forum.htmlboo...showtopic=26485

Ааа, ну ясно) Хотя ТС уже удалил картинку, но я прекрасно помню, что на ней было и могу сразу сказать, что это была совершенно иная ситуация, где я, как и тогда, могу смело сказать, что делал бы сейчас тоже самое. Там я не хотел отрывать картинку от правой колонки и поэтому предлагал засунуть её туда целиком. Сейчас я бы возможно сделал ПЭ от правой колонки, хотя это серьёзно) НО смотрел бы по ситуации, но в любом случае делал бы так же.

А, кстати, ты тогда думала по другому и меня не слушала, а сейчас уже соглашаешься, что я был прав

[Viper]

Viper, Я вот смотрю сейчас на эту полоску и понимаю, что она не является разделителем вообще, а относится именно к Хедеру, тогда вопрос, почему я должен бросать что-то во вне, если это относится к чему-то?

А не кто и не предлагает делать её разделителем и она им не являеться. Этот элемент не несет не какой семантической или структурной значимости - он декоративный. И да, он относиться к Хедеру и, как я писал, такие декоративные элементы должны находиться в своем секционном теге(контейнере), в данном случае - в Хедере.

Все выше сказанное я обобщил и не относил исключительно к данному случаю. Нашел називаеться причину поспорить(подискутировать)

Ну давай тогда и другие части хедера тоже поделим и выбросим наружу)

Эх... видимо я, как всегда, херово(сорри) обьсняю) Это уже нельзя назвать - "подойти с умом") Мы говорим исключительно про декоративные элементы(фоны), которые не смогли(по каким-либо причинам) применить стилями к структурным элементам, тоисть, декоративные элементы, с которых мы бы, в противном случае, делали Врапы.

Делать пустые элементы(для оформления) в случае, когда можно это оформеление(стили) применить к структурным(или уже имеющимся) тегам - вот этот херово)

[SelenIT]

элемент, при нажатии на который происходит раскрытие и сворачивание подменю.

Семантичнее будет сделать ссылкой, ИМХО.

Не ссылкой, тридцать три раза массаракш!

[Viper]

Не ссылкой, тридцать три раза массаракш!

Возможно погорячился, но в таком случае стоит добавить к <span>, как минимум - role="button" и tabindex, ИМХО. Иначе никакой семантической роли этот элемент не будет нести. И у людей, использующих голосовые программы для работы с сайтом(например, слепые), будут явные проблемы...

Edited July 25, 2012 by Viper